<p>
    <span>"{{evilTitle}}" is the <i>interpolated</i> evil title</span>
</p>
<p>
    "<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil title.
</p>
<p>
    <img src="{{heroImageUrl}}" width="80px"> is the <i>interpolated</i> image.
</p>
<p>
    <img [src]="heroImageUrl" width="80px"> is the <i>interpolated</i> image.
</p>
<p>
    <img src="{{emptyImageUrl}}" width="80px"> empty image
</p>
<p>
    <img [src]="emptyImageUrl" width="80px"> empty image
</p>
<table border="1">
    <tr>
        <td [attr.colspan]="1+1">One-Two</td>
    </tr>
    <tr>
        <td>Five</td>
        <td>Six</td>
    </tr>
</table>
<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>

<div class="bad curly special">Bad curly special</div>
<div class="bad curly special" [class]="badCurly">Bad curly</div>
<div [class.special]="isSpecial">The class binding is special</div>
<div class="special" [class.special]="!isSpecial">This one is not so special</div>

<button [style.color]="isSpecial ? 'red' : 'green'">Red</button>
<button [style.background-color]="canSave ? 'cyan' : 'grey'">Save</button>

<button [style.font-size.em]="isSpecial ? 3 : 1">Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50">Small</button>

<div [ngClass]="setClasses()">This div is saveable and special
    <input type="checkbox" [(ngModel)]="isSpecial" value="isSpecial">
    <input type="checkbox" [(ngModel)]="canSave" value="saveable">
    <input type="checkbox" [(ngModel)]="isUnchanged" value="isUnchanged">
</div>

<div [ngStyle]="setStyles()">
    This div is italic, normal weight, and extra large (24px).
</div>

<div>
    <li *ngFor="let item of heroes; let i = index">
        {{i + 1}} - {{item.name}}
    </li>
</div>
<div>
    <div *ngFor="let hero of heroes; trackBy:trackByHeroes">
        ({{hero.id}}) {{hero.name}}
    </div>
</div>